<template>
  <div class="wrap">
    <canvas id="renderCanvas"></canvas>
  </div>
</template>

<script>
import * as BABYLON from "babylonjs"; //全部引入
export default {
  name: "boxCom",
  data() {
    return {
      light1: null,
      light2: null,
      sphere: null,
      engine: null,
      canvas: null
    };
  },
  props: {
    msg: String
  },
  methods: {
    /******* Add the create scene function ******/
    createScene() {
      // 创建一个场景scene
      var scene = new BABYLON.Scene(this.engine);

      // 添加一个相机，并绑定鼠标事件
      var camera = new BABYLON.ArcRotateCamera(
        "Camera",
        Math.PI / 2,
        Math.PI / 2,
        2,
        new BABYLON.Vector3(0, 0, 5),
        scene
      );
      camera.attachControl(this.canvas, true);

      // 添加一组灯光到场景
      this.light1 = new BABYLON.HemisphericLight(
        "light1",
        new BABYLON.Vector3(1, 1, 0),
        scene
      );
      this.light2 = new BABYLON.PointLight(
        "light2",
        new BABYLON.Vector3(0, 1, -1),
        scene
      );

      // 添加一个球体到场景中
      this.sphere = BABYLON.MeshBuilder.CreateSphere(
        "sphere",
        { diameter: 2 },
        scene
      );
      BABYLON.SceneLoader.ImportMesh(
        "",
        "static/model/xz_map1/",
        "xz_map1.babylon",
        scene,
        function(newMeshes) {
          // Set the target of the camera to the first imported mesh
          camera.target = newMeshes[0];
          console.log(newMeshes, "22");
        }
      );

      return scene;
    }
  },
  mounted() {
    this.canvas = document.getElementById("renderCanvas"); // 得到canvas对象的引用
    this.engine = new BABYLON.Engine(this.canvas, true); // 初始化 BABYLON 3D engine

    /******* End of the create scene function ******/

    this.scene = this.createScene(); //Call the createScene function

    // 最后一步调用engine的runRenderLoop方案，执行scene.render()，让我们的3d场景渲染起来
    this.engine.runRenderLoop(() => {
      this.scene.render();
    });

    // 监听浏览器改变大小的事件，通过调用engine.resize()来自适应窗口大小
    window.addEventListener("resize", () => {
      this.engine.resize();
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.wrap {
  height: 100vh;
  width: 100vw;

  #renderCanvas {
    height: 100%;
    width: 100%;
  }
}
</style>
